<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="js/bower_components/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="js/bower_components/bootstrap-select/dist/css/bootstrap-select.min.css">
    <link rel="stylesheet" href="js/bower_components/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.min.css">
    <link rel="stylesheet" href="js/bower_components/bootstrap-table/dist/bootstrap-table.min.css">
    <link rel="stylesheet" href="js/bower_components/bootstrap-treeview/dist/bootstrap-treeview.min.css">
    <link href="js/bower_components/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
</head>

<body>
    <div class="inpiut-group">
        用户名称: <input type="text" id="txtUsername">
        <button type="button" id="btnSelect" class="btn btn-default">搜索</button>
    </div>
    <div style="margin:5px;margin-top: 10px;">
        <button type="button" id="btnAdd" class="btn btn-success">新增</button>
        <button type="button" id="btnUpdate" class="btn btn-info">修改</button>
        <button type="button" id="btnDel" class="btn btn-danger">删除</button>
    </div>
    <!-- 列表区域 -->
    <div class="row col-md-10" style="margin-top: 10px;">
        <table id="tbMyUser"></table>
    </div>
    <!-- 静态框中涵盖的表单功能 -->
    <div class="modal fade" id="divMyUserForm" tabindex="-1" role="dialog" aria-labelledby="MyModel" aria-hidden="true">
        <div class="modal-dialog" style="width:400px">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModelLable">用户信息</h4>
                    <input type="hidden" id="userid">
                </div>
                <div class="modal-body form-inline">
                    <div class="form-group">
                        <label class="control-label" for="username">用户名称:</label>
                        <input type="text" class="form-control" id="username" placeholder="" style="width: 220px;">
                    </div>
                    <br>
                    <div class="form-group">
                        <label class="control-label" for="pwd">密码:</label>
                        <input type="text" class="form-control" id="pwd" placeholder="" required="required" style="width:220px">
                    </div>
                    <br>
                    <br>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" id="btnSave">保存</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="js/bower_components/jquery/dist/jquery.min.js"></script>
    <script src="js/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="js/bower_components/bootbox.min.js"></script>
    <script src="js/bower_components/bootstrap-select/js/bootstrap-select.js"></script>
    <script src="js/bower_components/bootstrap-switch/dist/js/bootstrap-switch.min.js"></script>
    <script src="js/bower_components/bootstrap-table/dist/bootstrap-table.min.js"></script>
    <script src="js/bower_components/bootstrap-table/dist/locale/bootstrap-table-zh-CN.js"></script>

    <script src="js/bower_components/bootstrap-treeview/dist/bootstrap-treeview.min.js"></script>
    <script src="js/bower_components/jquery-form-validator/form-validator/jquery.form-validator.min.js"></script>
    <script src="js/bower_components/moment/min/moment-with-locales.min.js"></script>
    <script src="js/bower_components/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js"></script>
    <script>
        function jsonp(option) {
            // 动态创建script标签
            var script = document.createElement('script');
            //拼接字符串变量
            var params = '';
            for (var attr in option.data) {
                params += '&' + attr + '=' + option.data[attr];
            }
            // 动态生成请求函数名
            var fnName = 'myJsonp' + Math.random().toString().replace('.', '');
            //将success函数变成全局函数
            window[fnName] = option.success;
            script.src = option.url + '?callback=' + fnName + params;
            //将script标签追加到页面
            document.body.appendChild(script);
            //为script标签添加onload事件，来清除生成的DOM
            script.onload = function() {
                document.body.removeChild(script)
            }
        }
        $(function() {
                //数据初始化
                getDate();

                //新增功能
                $("#btnAdd").click(function() {
                        console.log("新增")
                        $("#myModelLable").text("新增用户信息");
                        $("#divMyUserForm").modal();
                    })
                    //保存数据
                $("#btnSave").click(function() {
                    var id = $("#userid").val();
                    console.log(id);
                    if (id != null) {
                        //修改信息
                        MyUser = {
                            "username": $("#username").val(),
                            "pwd": $("#pwd").val(),
                            // "userid": id,
                        };
                        console.log(MyUser);
                        jsonp({
                            type: "put",
                            url: "http://localhost:8080/myUser/updateUser",
                            contentType: "application/json;charset=utf-8",
                            data: MyUser,
                            dataType: "json",
                            success: function(res) {
                                console.log("修改后返回数据");
                                console.log(res);
                                if (res > 0) {
                                    alert("保存成功");
                                    $("#divMyUserForm").modal('hide');
                                    getDate();
                                }
                            }

                        });
                    } else {
                        //添加新信息
                        MyUser = {
                            "username": $("#username").val(),
                            "pwd": $("#pwd").val()
                        }
                        jsonp({
                            type: "put",
                            url: "http://localhost:8080/myUser/addUser",
                            contentType: "application/json;charset=utf-8",
                            data: MyUser,
                            dataType: "json",
                            success: function(res) {
                                console.log("添加数据返回结果");
                                console.log(res);
                                if (res > 0) {
                                    alert("保存成功");
                                    $("#MyUserForm").modal('hide');
                                    getDate();
                                }
                            }
                        })
                    }
                })
            })
            //给修改按钮添加点击事件
        $("#btnUpdate").click(function() {
                //获取主键
                var userid = getSelectID();
                console.log(userid);
                $("#myModelLable").text("新增用户信息");
                $("#divMyUserForm").modal();
                $.ajax({
                    type: "get",
                    url: "http://localhost:8080/myUser/getUser?userid=" + userid,
                    contentType: "application/json;charset=utf-8",
                    dataType: "json",
                    success: function(res) {
                        console.log("根据主键获取后端返回结果");
                        console.log(res);
                        if (res != null) {
                            $("myModelLable").text("修改用户信息");
                            $("username").val(res["username"]);
                            $("pwd").val(res["pwd"]);
                            $("userid").val(res["userid"]);
                            //打开静态窗体
                            $("divMyUserForm").modal();
                        }
                    }
                })
            })
            //获取列表中选中的数据
        function getSelectID() {
            var id = $("#tbMyUser").bootstrapTable('getSelections');
            console.log(id);
            if (id.length > 0) {
                return id[0].userid;
            } else {
                bootbox.alert('必须选择一条要修改的信息')
            }
        }
        // 删除列表当中的信息
        $("#btnDel").click(function() {
                console.log("进入删除方法");
                var userid = getSelectID();
                console.log(userid);
                $.ajax({
                    type: "GET",
                    url: "http://localhost:8080/myUser/deleteUser?userid=" + userid,
                    contentType: "application/json;chatset=utf-8",
                    dataType: "json",
                    success: function(res) {
                        console.log("根据主键删除数据并返回结果:");
                        console.log(res);
                        if (res == 1) {
                            bootbox.alert("删除成功");
                            getDate();
                        }
                    }
                })
            })
            // 给搜索按钮添加点击事件
        $("btnSelect").click(function() {
            var username = $("#txtUsername").val();
            console.log(username);
            if (username.length == 0) {
                getDate();
            } else {
                MyUser = {
                    "beginPage": 0,
                    "pageCount": 4,
                    "username": username,
                }
                $.ajax({
                    type: "put",
                    url: "http://localhost:8080/myUser/getAll",
                    contentType: "application/json;charset=utf-8",
                    data: JSON.stringify(MyUser),
                    dataType: "json",
                    success: function(res) {
                        console.log("获取分页后的数据，返回结果是：");
                        console.log(res);
                        setTabel(res);
                    }
                })
            }
        })


        // 获取列表数据
        function getDate() {
            MyUser = {
                "beginPage": 0,
                "pageCount": 4
            };
            $.ajax({
                type: "put",
                url: "http://localhost:8080/myUser/getAll",
                contentType: "application/json",
                data: JSON.stringify(MyUser),
                dataType: "json",
                success: function(res) {
                    console.log("获取分页后的数据，结果是:");
                    console.log(res);
                    setTabel(res);
                }

            })
        }
        // 将数据绑定在表格上
        function setTabel(myUserList) {
            $("#tbMyUser").bootstrapTable('destroy')
            $("#tbMyUser").bootstrapTable({
                data: myUserList,
                striped: true,
                contentType: "application/x-www-form-urlencoded;charset=utf-8",
                uniqueId: "value",
                idField: "userid",
                checkboxHeader: true,
                singleSelect: true,
                clickToSelect: true,
                columns: [{
                        field: "userid",
                        align: "center",
                        visible: false,
                    }, {
                        field: "username",
                        title: "Username",
                        align: "center",
                    }, {
                        field: "pwd",
                        title: "Password",
                        align: "center",
                    }, {
                        field: "isStart",
                        title: "IsStart",
                        checkbox: true,
                        align: "center",
                    }

                ]
            })
        }
    </script>
</body>

</html>